<template>
  <div class="home-page">
    <div class="banner-container">
      <div class="container">
        <div class="link">
          主要分类：<a :href="link.url" class="link-item" v-for="link in links" :key="link.id">
            {{ link.title }}
          </a>
        </div>
        <div class="block">
          <el-carousel trigger="click">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3 class="small">{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="card">
          <el-card style="height: 300px" shadow="never">
            今日优惠
          </el-card>
        </div>
      </div>
    </div>

    <div class="recommend-words">
      <div class="words">
      <h1>为你推荐</h1>
      </div>
    </div>
    <br>

    <div class="recommend-container">
      <div class="recommend">
        <div class="commodity-container">
          <div class="card-container" v-for="tag in tags" :key="tag.id">
            <div class="commodity">
              <el-card shadow="hover">
                <div class="close">
                  <el-button type="text" icon="el-icon-close" circle size="mini"></el-button>
                </div>
                <div class="img">
                  <img class="card-image" v-if="tag.imageUrl" :src="tag.imageUrl" alt="图片资源">
                  <img v-else src="../assets/commodity-error.png" alt="图片资源" class="card-image">
                </div>
                <div>
                  <span class="comm-name">{{ tag.name }}</span>
                  <div class="comm-desc-container">
                    <p class="comm-desc">{{ tag.description }}</p>
                  </div>
                  <strong class="comm-price">￥{{ tag.price }}</strong>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      links: [
        // 这里是从后端获取的数据
        {id: 1, title: 'Google', url: 'https://www.google.com'},
        {id: 2, title: 'GitHub', url: 'https://github.com'},
        {id: 3, title: 'Baidu', url: 'https://www.baidu.com'},
      ],

      tags: [
        {imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name: '标签一', description: '简短的一句话,简短的一句话,简短的一句话,简短的一句话,简短的一句话',price:0.00},
        {imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name: '标签一', description: '简短的一句话,简短的一句话,简短的一句话,简短的一句话,简短的一句话',price:0.00},
        {imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name: '标签一', description: '简短的一句话,简短的一句话,简短的一句话,简短的一句话,简短的一句话',price:0.00},
        {imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name: '标签一', description: '简短的一句话,简短的一句话,简短的一句话,简短的一句话,简短的一句话',price:0.00},
        {imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name: '标签一', description: '简短的一句话,简短的一句话,简短的一句话,简短的一句话,简短的一句话',price:0.00},
        {imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name: '标签一', description: '简短的一句话,简短的一句话,简短的一句话,简短的一句话,简短的一句话',price:0.00},
        {imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name: '标签一', description: '简短的一句话,简短的一句话,简短的一句话,简短的一句话,简短的一句话',price:0.00},
        {imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name: '标签一', description: '简短的一句话,简短的一句话,简短的一句话,简短的一句话,简短的一句话',price:0.00},
        {imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name: '标签一', description: '简短的一句话,简短的一句话,简短的一句话,简短的一句话,简短的一句话',price:0.00},
        {imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name: '标签一', description: '简短的一句话,简短的一句话,简短的一句话,简短的一句话,简短的一句话',price:0.00},
        {imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name: '标签一', description: '简短的一句话,简短的一句话,简短的一句话,简短的一句话,简短的一句话',price:0.00},
        {name: '标签一', description: '简短的一句话,简短的一句话,简短的一句话,简短的一句话,简短的一句话',price:0.00},
        {imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name: '标签一', description: '简短的一句话,简短的一句话,简短的一句话,简短的一句话,简短的一句话',price:0.00},
        {imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name: '标签一', description: '简短的一句话,简短的一句话,简短的一句话,简短的一句话,简短的一句话',price:0.00},
        {imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name: '标签一', description: '简短的一句话,简短的一句话,简短的一句话,简短的一句话,简短的一句话',price:0.00},
        {imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name: '标签一', description: '简短的一句话,简短的一句话,简短的一句话,简短的一句话,简短的一句话',price:0.00},
        {imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name: '标签一', description: '简短的一句话,简短的一句话,简短的一句话,简短的一句话,简短的一句话',price:0.00},
        {imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name: '标签一', description: '简短的一句话,简短的一句话,简短的一句话,简短的一句话,简短的一句话',price:0.00},


      ]
    };
  },
};
</script>


<style scoped>
/*.home-page {
  display: flex;
  justify-content: center;
}

.block {
  width: 80%;
  !*max-width: 800px; *!!* 设置最大宽度,可以根据需求调整 *!
}*/
.home-page {
  background: linear-gradient(to bottom, #a1d2ff, #ffffff);
}

/*宣传栏（多导航，跑马灯，卡片）样式*/

.banner-container {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

.container {
  display: flex;
  height: 300px;
  /* align-items: center;
   justify-content: center;*/
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 80%;
}

/*flex-basis: 210px; 设置 .link 元素的初始宽度为 210px。
  flex-grow: 0; 设置 .link 元素不会随着容器的变化而增长。
  flex-shrink: 0; 设置 .link 元素不会随着容器的变化而缩小。*/
.link {
  flex-basis: 210px;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 10px;
}

.block {
  flex-basis: 60%;
  flex-grow: 0;
  flex-shrink: 0;
}

.card {
  flex: 40%;
  height: auto;
}

/*测试样式*/
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

/*超链接样式*/
.link {
  background-color: #ffffff;
}

.link-item {
  display: block;
  margin-bottom: 20px;
  color: black;
  text-decoration: none;
}

/*推荐区域*/
/*.recommend-container {
  display: flex;
  justify-content: center;
}

.recommend {
  !*display: flex;*!
  justify-content: center;
  width: 80%;
}

.card-container {
  padding: 5px;
}

.commodity-container {
  display: flex;
}

.commodity {
  width: 260px;
  padding: 10px;
}*/

.recommend-words{
  display: flex;
  justify-content: center;
}

.words{
  width: 80%;
  text-align: center;
}

.recommend-container{
  display: flex;
  justify-content: center;
}

.recommend {
  display: flex;
  justify-content: center;
  width: 80%;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #f5f5f5;
}

.commodity-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.card-container {
  flex: 1 1 200px;
  max-width: 250px;
}

.commodity {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.commodity:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
}

.close .el-button {
  padding: 0;
}

.img {
  width: auto;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.commodity:hover .card-image {
  transform: scale(1.05);
}

.el-card__body {
  padding: 15px;
  text-align: center;
}

.comm-name {
  color: #171717;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.comm-desc-container {
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comm-desc {
  color: #3e3e3e;
  font-size: 14px;
  line-height: 1.5;
}

.comm-price {
  color: #1c2f5a;
  font-size: 24px;
  font-weight: bold;
  margin-top: 10px;
}
</style>